<template>
	<view class="content-history">
		<view class="content-title">
			<p>对话列表</p>
			<view class="content-title-right">
				<u-icon name="trash" color="#000" size="28" @click="delete_TF = true" v-if="!delete_TF"></u-icon>
				<view class="content-title-control" v-if="delete_TF"> <span @click="qingkong">清空</span> <span class="shu-icon"></span>  <span @click="delete_TF = false">完成</span> </view>
			</view>
		</view>
		<view class="chat-list">
			<view :class="['chat-list-item',index == select_index ? 'select-item': '']" v-for="(item,index) in chatList" :key="index" @click="selectChat(index)">
				<view class="chat-list-left">
					<image class="logo-chat" v-if="item.dialog.app_icon" :src="item.dialog.app_icon" mode=""></image>
					<image class="logo-chat-img" v-else src="../../static/ai_index_icon_robot@2x.png" mode=""></image>
				</view>
				<view class="chat-list-right">
					<view class="chat-list-right-top" v-if="item.type == 'text'">{{item.dialog.message}}</view>
					<view class="chat-list-right-top" v-if="item.type == 'img'">图片</view>
					<view class="chat-list-right-bottom">{{item.dialog.updated_at}} {{item.dialog.app_name ? item.dialog.app_name : ''}}</view>
				</view>
				<view class="close-icon" v-if="delete_TF" @click.stop="deleteChat(item.ident)">
					<u-icon name="trash" color="#000" size="28"></u-icon>
				</view>
			</view>
			<view style="width: 100%;text-align: center;" v-if="chatList.length === 0">~暂无对话~</view>
		</view>
		<view class="btn-add" v-if="!delete_TF" @click="addChat">
			<u-icon name="plus" color="#fff" size="16"></u-icon>
			<span>新建AI对话</span>
		</view>
	</view>
</template>

<script>
	import http from '@/api/api-index.js'
	
	export default{
		data(){
			return{
				select_index:null,
				chatList:[],
				delete_TF:false,
				user_id:'',
			}
		},
		onLoad() {
			let uid = uni.getStorageSync('uid');
			this.user_id = uid
			this.getHistoryList()
		},
		methods:{
			getHistoryList(){
				uni.showLoading();
				if(!this.user_id){
					uni.showToast({
						title:'暂无登录',
						icon:'none'
					})
					return false
				}
				http.getHistory({
					user_id:this.user_id
				}).then((res)=>{
					uni.hideLoading()
					let arrayList = res.data.result 
					arrayList.forEach((item)=>{
						if(item.dialog.message.includes('img')){
							item.type = 'img'
						}else{
							item.type = 'text'
						}
					})
					this.chatList = arrayList
				})
			},
			selectChat(index){
				if(this.chatList[index].dialog.app_name){
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?ident='+this.chatList[index].ident+"&name="+this.chatList[index].dialog.app_name+"&appid="+this.chatList[index].dialog.appid
					})
				}else{
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?ident='+this.chatList[index].ident+"&name=易通AI"
					})
				}
				
			},
			//清空所有对话
			qingkong(){
				let _this = this
				if(!this.user_id){
					uni.showToast({
						title:'暂无登录',
						icon:'none'
					})
					return false
				}
				uni.showModal({
					title: '提示',
					content: '是否清空所有对话',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading()
							http.deleteAllChat({
								user_id:_this.user_id
							}).then((res)=>{
								uni.hideLoading()
								if(res.data.code == 200){
									uni.showToast({
										title: res.data.msg,
									})
									_this.getHistoryList()
								}else{
									uni.showToast({
										title: res.data.msg,
										icon:'error'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//删除当前对话
			deleteChat(ident){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否删除当前对话',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading()
							http.deleteThisChat({
								user_id:_this.user_id,
								dialog_ident:ident
							}).then((res)=>{
								uni.hideLoading()
								if(res.data.code == 200){
									uni.showToast({
										title: res.data.msg,
									})
								}else{
									uni.showToast({
										title: res.data.msg,
										icon:'error'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//创建新对话
			addChat(){
				let _this = this
				if(!this.user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				uni.showModal({
					title: '提示',
					content: '是否创建新的对话',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading()
							http.postCreateChat({
								user_id:_this.user_id
							}).then((res)=>{
								console.log(res)
								uni.hideLoading()
								if(res.data.code == 200){
									uni.showToast({
										title: '创建成功！',
									})
									uni.navigateTo({
										url:'/pages/singleChat/singleChat?ident='+res.data.result+"&name=易通AI&welcome_message=你好！"
									})
								}else{
									uni.showToast({
										title: res.data.msg,
										icon:'error'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-history{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		color: #000;
		box-sizing: border-box;
		padding: 15px;
		overflow: hidden;
		.content-title{
			width: 100%;
			height:45px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			background: #fff;
			box-sizing: border-box;
			padding: 0 15px;
			box-shadow: 0px 0px 10px #eee;
			.content-title-right{
				display: flex;
				flex-direction: row;
				align-items: center;
				.content-title-control{
					display: flex;
					flex-direction: row;
					align-items: center;
					.shu-icon{
						width: 2px;
						height: 20px;
						background-color: #fff;
						margin: 0 10px;
					}
				}
			}
		}
		.chat-list{
			position: relative;
			top: 45px;
			left:0px;
			box-sizing: border-box;
			padding-bottom: 120px;
			.select-item{
				background-color: #4d4d4d !important;
			}
			.chat-list-item{
				width: 100%;
				height: 80px;
				border-radius: 10px;
				background-color: #fff;
				// background-color: #4d4d4d;
				margin-bottom: 15px;
				display: flex;
				flex-direction: row;
				box-sizing: border-box;
				padding: 10px;
				position: relative;
				box-shadow: 0px 2px 5px 1px #eee;
				.chat-list-left{
					width: 60px;
					height: 60px;
					background: #fff;
					border-radius: 10px;
					margin-right: 10px;
					color: #fff;
					font-size:40px;
					text-align: center;
					line-height: 60px;
					.logo-chat{
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
					.logo-chat-img{
						width: 60px;
						height: 60px;
						border-radius: 50%;
					}
				}
				.chat-list-right{
					width: calc(100% - 70px);
					.chat-list-right-top{
						width: 100%;
						height: 30px;
						line-height: 30px;
						color: #000;
						font-size: 14px;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.chat-list-right-bottom{
						width: 100%;
						font-size: 14px;
						line-height: 30px;
						color: #000;
					}
				}
				.close-icon{
					position: absolute;
					right: 10px;
					top: 0;
					height: 100%;
					width: 28px;
					z-index: 9;
					line-height: 80px;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #fff;
					justify-content: center;
				}
			}
		}
		.btn-add{
			width: 90%;
			height: 50px;
			position: fixed;
			bottom: 30px;
			left: 5%;
			z-index: 999;
			background:$main-color;
			color: #fff;
			border-radius: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			span{
				margin-left: 10px;
			}
		}
	}
	
</style>